<template>
  <div class="employees">
    <pagetool>
      <template #right>
        <el-button
          :disabled="'employee-allAdd' | btnper"
          type="primary"
          @click="$router.push('/employees/myimport')"
        >导入</el-button>
        <el-button type="primary" @click="add">+ 新增员工</el-button>
      </template>
    </pagetool>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      border
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column label="头像">
        <template slot-scope="{ row }">
          <img
            v-errorImg="require('@/assets/common/bigUserHeader.png')"
            :src="row.staffPhoto"
            class="staffPhoto"
            alt=""
            @click="showCode(row.staffPhoto)"
          ></template>
      </el-table-column>
      <el-table-column property="username" label="姓名" width="120" />
      <el-table-column property="mobile" label="手机号" width="120" />
      <el-table-column property="workNumber" label="工号" />
      <el-table-column label="聘用形式">
        <template slot-scope="{ row }">
          {{ row.formOfEmployment | turnHireType }}
        </template>
      </el-table-column>
      <el-table-column property="departmentName" label="部门" />
      <el-table-column label="入职时间">
        <template slot-scope="{ row }">
          {{ row.timeOfEntry | timeFormat }}
        </template>
      </el-table-column>
      <el-table-column label="是否在职">
        <template>
          在职
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template>
          可用
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="{ row }">
          <el-button type="text" @click="toDetail(row.id)">查看</el-button>
          <el-button type="text">转正</el-button>
          <el-button type="text">调岗</el-button>
          <el-button type="text">离职</el-button>
          <el-button type="text" @click="role(row.id)">角色</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <add :show-dailog.sync="showDailog" @addEmployee="getEmployee()" />

    <el-dialog title="二维码" :visible.sync="isVisible">
      <canvas ref="mycanvas" />
    </el-dialog>
    <el-dialog title="角色设置" :visible.sync="isRole">
      <!-- <canvas ref="mycanvas" /> -->
      <el-checkbox-group v-model="checkedRole">
        <el-checkbox
          v-for="item in checkedList"
          :key="item.id"
          :label="item.id"
        >{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isRole = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import add from './components/add.vue'
import {
  getEmployee,
  getUserInfoById,
  setAssignRolesApi
} from '../../api/employees'
import { getRoleList } from '@/api/role'
import Qrcode from 'qrcode'

// import employees from '../../utils/employees.js'
export default {
  components: {
    add
  },
  // filters: {
  //   turnHireType(value) {
  //     var obj = null
  //     employees.hireType.forEach(v => {
  //       if (v.id == value) {
  //         obj = v
  //       }
  //     })
  //     return obj ? obj.value : ''
  //   }
  // },
  data() {
    return {
      tableData: [],
      showDailog: false,
      isVisible: false,
      checkedRole: [],
      isRole: false,
      checkedList: [],
      userId: '',
      page: {
        currentPage: 1,
        pageSizes: [5, 10, 15],
        pageSize: 5,
        total: 10
      }
    }
  },
  created() {
    this.getEmployee()
  },
  methods: {
    async submit() {
      try {
        await setAssignRolesApi({
          id: this.userId,
          roleIds: this.checkedRole
        })
        this.$message.success('更改角色成功')

        this.isRole = false
        this.getEmployee()
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    async role(id) {
      this.userId = id
      const { rows } = await getRoleList()
      // console.log(list)
      this.checkedList = rows
      const { roleIds } = await getUserInfoById(id)
      this.checkedRole = roleIds
      console.log(roleIds)
      this.isRole = true
    },
    showCode(url) {
      this.isVisible = true
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.mycanvas, url, { width: 200, height: 200 })
      })
    },
    toDetail(id) {
      // console.log(row)
      this.$router.push(`/employees/detail/${id}`)
    },
    add() {
      this.showDailog = true
    },
    handleSizeChange(size) {
      this.page.pageSize = size
      this.getEmployee()
    },
    handleCurrentChange(page) {
      this.page.currentPage = page
      this.getEmployee()
    },
    async getEmployee() {
      const res = await getEmployee({
        page: this.page.currentPage,
        size: this.page.pageSize
      })
      // console.log(res)
      this.tableData = res.rows
      this.page.total = res.total
    }
  }
}
</script>

<style lang="scss" scoped>
.employees {
  padding: 20px;
  .staffPhoto {
    width: 50px;
    height: 50px;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
